<template>
  <el-container style="padding: 20px;">
    <el-header>
      <h2>添加帖子</h2>
    </el-header>
    <el-main>
      <el-form :model="post" :rules="rules" ref="postForm" label-width="80px" @submit.prevent="submitForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="post.title" placeholder="请输入标题"></el-input>
        </el-form-item>

        <el-form-item label="内容" prop="content">
          <el-input
              type="textarea"
              :rows="6"
              v-model="post.content"
              placeholder="请输入内容"
          ></el-input>
        </el-form-item>

        <el-form-item label="作者" prop="author">
          <el-input v-model="post.author" placeholder="请输入作者"></el-input>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-select v-model="post.status" placeholder="请选择状态">
            <el-option label="未审核" :value="0"></el-option>
            <el-option label="正常" :value="1"></el-option>
            <el-option label="驳回" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="分类" prop="category">
          <el-select v-model="post.category" placeholder="请选择分类">
            <el-option label="公告" :value="0"></el-option>
            <el-option label="帖子" :value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">立即提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { addPost } from '@/api/post';

export default {
  name: "AddPost",
  data() {
    return {
      post: {
        title: "",
        content: "",
        author: "",
        status: null,
        category: null  // 数字类型
      },
      rules: {
        title: [{required: true, message: "请输入标题", trigger: "blur"}],
        content: [{required: true, message: "请输入内容", trigger: "blur"}],
        author: [{required: true, message: "请输入作者", trigger: "blur"}],
        status: [{required: true, message: "请选择状态", trigger: "change"}],
        category: [{required: true, message: "请选择分类", trigger: "change"}]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          addPost(this.post).then(res => {
            if (res.code === 0) {
              this.$message.success("帖子添加成功");
              this.resetForm();
              this.$router.push("/post");
            } else {
              this.$message.error("添加帖子失败");
            }
          }).catch(error => {
            console.error(error);
            this.$message.error("添加帖子失败");
          });
        } else {
          this.$message.warning("请完善表单信息");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.postForm.resetFields();
    }
  }
};
</script>

<style scoped>
.el-container {
  max-width: 600px;
  margin: 0 auto;
}
</style>
